<template>
	<view>
		<view class="userInfo">
			<view class="fl">
				<image class="userLogo" :src="member_info.member_avatar" mode=""></image>
			</view>
			<view class="user2">
				<view class="Cfff" style="font-size: 16px;font-weight: bold;">{{member_info.nickname}}</view>
				<image v-if="member_info.vip_icon.length > 0" :src="member_info.vip_icon" mode="aspectFit" style="width: 33px;height: 23px;margin-left: 4px;"></image>
			</view>
		</view>
		
		<view class="cars flex">
			<view @click="toGwj(1)">
				<view class="fs18 C666">我的积分</view>
				<view><image style="width: 60upx;height: 60upx;position: relative;top: 15upx;" src="../static/images/gwjLis_gift.png" mode=""></image></view>
				<view class="fs18 C333"><text class="Cc06">{{member_info.member_points?member_info.member_points:0}}</text></view>				
			</view>
			<view @click="toDaijinquan1()">
				<view class="fs18 C666">可用优惠券</view>
				<view><image style="width: 70upx;height: 60upx;position: relative;top: 15upx;" src="../static/images/gwjlis_quan.png" mode=""></image></view>
				<view class="fs18 C333"><text class="Cc06">{{vouchercount?vouchercount:0}}</text>张</view>
			</view>
			<view @click="toYdhlp()">
				<view class="fs18 C666">已兑换礼品</view>
				<view><image style="width: 60upx;height: 60upx;position: relative;top: 15upx;" src="../static/images/duihuanlipinLogo.png" mode=""></image></view>
				<view class="fs18 C333"><text class="Cc06">{{pointordercount?pointordercount:0}}</text>件</view>
			</view>			
		</view>
		<view class="title">
			<view class="C333 bold"> 
				热门代金券
			</view>
			<view @click="toDaijinquan()" class="fs18 C999" style="color: erd;">
				更多
			</view>
		</view>
		<view v-if="index<2" v-for="(item,index) in voucherList" :key="index" @click.stop="ToDeta(item.voucher_t_id)" class="ticket">
			<view class="ticketP Cfe0000">￥{{item.voucher_t_price}}</view>
			<view class="ticketC" v-if="item.voucher_t_range==0">全场通用</view>
			<view class="ticketC" v-if="item.voucher_t_range==1">商品优惠券</view>
			<view class="ticketC" v-if="item.voucher_t_range==2">限品类券</view>
			
			<view class="ticketN" v-if="item.voucher_t_range==0">全场通用</view>
			<view class="ticketN" v-if="item.voucher_t_range==1">{{item.goods_name}}</view>
			<view class="ticketN" v-if="item.voucher_t_range==2">{{item.gc_name}}</view>
			<view class="ticketM Cfe0000">满{{item.voucher_t_limit}}可用</view>
			<view class="ticketD Cfe0000">有效期：{{item.voucher_t_end_date}}</view>
			<view class="ticketX">详细信息<image src="../static/images/yhqIco.png" mode=""></image></view>
			<view @click.stop="gotTicket(item.voucher_t_id,item.voucher_t_type,item.voucher_t_range,item.voucher_t_rangeid,item.is_more_goods)" v-if="item.voucher_t_eachlimit > item.user_voucher_count || item.voucher_t_eachlimit == 0" class="ticketB Cfe0000">立即兑换</view>
			<view style="text-align: center;width: 146upx;" v-if="item.voucher_t_eachlimit > item.user_voucher_count || item.voucher_t_eachlimit == 0" class="ticketB2 fs18">			
				<text class="fs16" v-if="item.voucher_t_points.length < 4">需{{item.voucher_t_points}}积分</text>
				<text class="fs16" v-if="item.voucher_t_points.length >=4">需{{item.voucher_t_points/10000}}万积分</text>			
			</view>				
			<image class="ticketH" v-if="item.voucher_t_eachlimit == item.user_voucher_count && item.user_voucher_count != 0" src="../../static/images/hasgot.png" mode=""></image>			
			<image class="ticketBg" src="../static/images/yhgbg.png" mode=""></image>
		</view>	
		<view class="sort">
			<view class="fl sortway fs21 C333">
				排序方式：
			</view>
			<view @click="mrOrrq(1)" :class="mrOrrqFlag ? 'active':''" class="fl moren">
				默认
			</view>
			<view @click="mrOrrq(2)" :class="mrOrrqFlag ? '':'active'" class="fl moren">
				人气
			</view>
			
			<view style="display: none;" class="fr sortInputs">				
				<input class="fr" type="text" value="" />
				<text class="fr">-</text>
				<input class="fr" type="text" value="" />
				<text style="position: relative;top: 0upx;" class="fr fs16 C333">
					数额：
				</text>
			</view>			
		</view>
		
		
		<view @click="hidden2()" v-if="dhtkFlag" @touchmove.stop.prevent class="sxMask">
			<view @tap.stop class="innerMask2 tac">
				<view class="C333 fs24 bold">
					<image style="width: 48upx;height: 48upx;position: relative;top: 15upx;right: 10upx;" src="../static/images/dhq_redyes.jpg" mode=""></image>
					恭喜您，兑换成功
				</view>
				<view style="margin-top: 10px;" class="tac fs18 C666">
					感谢您的参与，祝您购物愉快
				</view>
				<view class="innerMask2Bs">
					<button @click="toUseintime()" class="innerMask2B1 fs21">立即使用</button>
					<button @click="hidden2()" class="innerMask2B2 fs21">关闭</button>
				</view>
			</view>
		</view>
		
		<view class="productLis">
			<view @click="toDetail(item.pgoods_id)" v-for="(item,index2) in pointprod_list" :key="index2" class="product">			
				<image :src="item.pgoods_image" mode="aspectFill"></image>
				<view class="fs18 C333 productInfo twoline">
					{{item.pgoods_name}}
				</view>
				<view><text class="Cfe0000 fs22 bold">{{item.pgoods_points}}</text> <text class="fs18 C666">积分</text></view>
				<button class="fs21 Cfff">
					立即兑换
				</button>		
			</view>
			<!-- <view style="width: 100%;margin: 50upx auto 24upx;" class="fs18 C666 tac">
				加载更多
			</view> -->
		
		</view>
			
				
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				add:0,
				prod_order:1,
				sort_type:"",
				ididid:"",
				storeOrplatform:"",
				platformType:"",
				dhtkFlag:false,
				voucherList:[],
				mrOrrqFlag:true,
				member_info:{},
				pointprod_list:[],
				curpage:1,
				hasmore:false,
				pointcart_count:"",
				pointordercount:"",
				vouchercount:"",
				is_more_goods:'',
				voucher_t_id:''
				
			}
		},
		
		onLoad() {
			this.getData()
			this.getProducts()
		},
		onReachBottom() {
			if(this.hasmore){
				this.curpage++;
				this.$util.request({
					url:"/mobile/index.php?act=pointprod&op=plist",
					method: 'get',
					data: {
						"curpage":this.curpage
					},
				}).then((res)=> {
					this.hasmore=res.datas.paged.hasmore
					this.pointprod_list=this.pointprod_list.concat(res.datas.pointprod_list)					
				})
			}else{
				uni.showToast({
					title:'已经是最后一页！',
					icon:'none'
				})
			}
		},
		methods: {
			ToDeta(voucher_id){
				uni.navigateTo({
					url:"/operation/voucher/info?voucher_id="+voucher_id+"&type=1"

				})
			},
			toUseintime(){
				if(this.is_more_goods == 1){
					uni.navigateTo({
						url:'/operation/voucher/productsLists?voucher_t_id='+this.voucher_t_id
					})
				}else{
					
				this.dhtkFlag=false;				
				if(this.storeOrplatform == 0 && this.platformType == 0){
					uni.navigateTo({
						url:"/mall/goods/list?thirdid="+this.ididid
					})
				}
				if(this.storeOrplatform == 0 && this.platformType == 1){
					uni.navigateTo({
						url:"/mall/goods/info?goods_id="+this.ididid
					})
				}
				if(this.storeOrplatform == 0 && this.platformType == 2){
					uni.navigateTo({
						url:"/mall/goods/list?thirdid="+this.ididid
					})
				}
				if(this.storeOrplatform == 1 && this.platformType == 1){
					uni.navigateTo({
						url:"/mall/goods/info?goods_id="+this.ididid
					})
				}
				if(this.storeOrplatform == 1 && this.platformType == 2){
					uni.navigateTo({
						url:"/mall/goods/list?thirdid="+this.ididid
					})
				}
				}
				
			},
			hidden2(){
				this.dhtkFlag=!this.dhtkFlag
			},
			gotTicket(num,num2,num3,num4,is_more_goods,voucher_t_id){
				this.storeOrplatform=num2
				this.platformType=num3
				this.ididid=num4
				console.log(num)
				var that=this
				this.$util.request({
					url: '/mobile/index.php?act=pointvoucher&op=voucherexchange_save',
					method: 'post',
					data: {
						"vid":num
					},
				}).then(function(res) {		
					console.log("兑换代金券")
					console.log(res)
					if(res.error_code == '0'){
						that.is_more_goods = is_more_goods
						that.voucher_t_id = num
						that.dhtkFlag=true
						this.getData()
					}
					if(res.message == 'success'){
						that.is_more_goods = is_more_goods
						that.voucher_t_id = num
						that.dhtkFlag=true
						this.getData()
					}
					if(res.error_code == '6630002'){
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
								
				})				
			},
			getProducts(){
				this.$util.request({					
					url:"/mobile/index.php?act=pointprod&op=plist",
					method: 'get',
					data: {
						"curpage":this.curpage
					},
				}).then((res)=> {	
					this.hasmore=res.datas.paged.hasmore
					this.pointprod_list=res.datas.pointprod_list
					console.log(this.pointprod_list)					
				})
			},
			getData(){
				this.$util.request({					
					url:"/mobile/index.php?act=pointprod&op=index",
					method: 'get',
					data: {
						
					},
				}).then((res)=> {		
					this.member_info=res.datas.member_info
					this.pointcart_count=res.datas.pointcart_count
					this.pointordercount=res.datas.pointordercount
					this.vouchercount=res.datas.vouchercount
					this.voucherList=res.datas.recommend_voucher			
				})
			},			
			toDaijinquan(){
				uni.navigateTo({
					url:"duihuanquan"
				})
			},
			toDaijinquan1(){
				uni.navigateTo({
					url:"../voucher/list"
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:"./goodsExchange?goods_id="+id
				})
			},
			toGwj(index){
				uni.navigateTo({
					url: "/member/wallet/yucunkuanmx?index=" + index
				})
			},
			toYdhlp(){
				uni.navigateTo({
					url:"Record"
				})
			},			
			mrOrrq(num){				
				if(num == 1){
					this.mrOrrqFlag=true
					this.add++;
					var aa=this.add%2
					var cc=aa+1
					this.$util.request({
						url:"/mobile/index.php?act=pointprod&op=plist",
						method: 'get',
						data: {
							// "sort_type":2,
							"sort_type":1,
							"prod_order":1
							// "prod_order":cc
						},
					}).then((res)=> {	
						this.hasmore=res.datas.paged.hasmore
						this.pointprod_list=res.datas.pointprod_list							
					})
				}else{
					this.mrOrrqFlag=false
					this.add++;
					var aa=this.add%2
					var cc=aa+1
					this.$util.request({
						url:"/mobile/index.php?act=pointprod&op=plist",
						method: 'get',
						data: {
							"sort_type":1,
							"prod_order":2
						},
					}).then((res)=> {
						this.hasmore=res.datas.paged.hasmore
						this.pointprod_list=res.datas.pointprod_list
					})
				}
			}
						
		}
	}
</script>

<style>
	.Cfe0000{
		color: #ff4300;
	}
	.Cc06{
		color: #ff4300;
	}
	.mt55mb30{
		margin-top: 55upx;
		margin-bottom: 30upx;
	}
	.Cfff{
		color: #FFFFFF;
	}
	.Cfe0000{
		color: #ff4300;
	}

	.flex{		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
	}
	.paddingL20{
		padding-left: 20upx;
	}
	.C999{
		color:#999 ;
	}
	.Cff0101{
		color:#ff0101 ;
	}
	.Cc00251{
		color: #c00251;
	}
	.strick{
		text-decoration: line-through;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.line1{
		width: 430upx;
	}
	.hide{
		display: none;
	}
	.marginB20{
		margin-bottom: 20upx;
	}
	
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.pl20{
		padding-left: 20upx;
	}
	.positionT{
		position: relative;
		top: 50upx;
	}
	.paddingB15{
		padding-bottom: 15upx;
	}
	.borderB{
		border-bottom: 1px solid #f4f4f6;
	}
	.borderT{
		border-top: 1px solid #f4f4f6;
	}
	.gl{
		position: absolute;
		right: 30upx;
	}
	.pr30{
		padding-right: 30upx;
	}
	.C333{
		color: #333333;
	}
	.C666{
		color: #666666;
	}
	.Cf00{
		color: #ff0000;
	}
	
	.bold{
		font-weight: bold;
	}
	.C1d1d1d{
		color:#1d1d1d ;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.tac{
		text-align: center;
	}
	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}
	.userInfo{
		background-color:#ff4300 ;
		height: 121upx;
		padding: 20upx;
		display: flex;
	}
	.userLogo{
		width: 110upx;
		height: 110upx;
		border-radius: 50%;
		position: relative;
		top: 10upx;
	}
	.user2{
		margin-left: 20upx;
		display: flex;
		/* background-color: yellow; */
		align-items: center;
	}
	.user3{
		border-radius: 6upx;;
		width: 242upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 27upx;
		background-color:#e5007e;
		margin-top: 62upx;
	}
	.user3 image{
		position: relative;
		top: 5upx;
		left: 5upx;
		width: 30upx;
		height: 30upx;
	}
	.cars{
		box-sizing: border-box;
		background-color: #f0f0f0;
		height: 200upx;
		padding:26upx 86upx;
	}
	.cars>view{
		text-align: center;
	}
	.sort{
		margin-top: 30upx;
		height: 66upx;
		line-height: 66upx;
		background-color: #f0f0f0;
		padding: 0 20upx;
	}
	.sort .sortway{
		height: 66upx;
		line-height: 66upx;
		padding-right: 20upx;
	}
	.moren{
		height: 66upx;
		line-height: 66upx;
		padding: 0 20upx;
		font-size: 24upx
	}
	.active{
		background-color: #ff4300;
		color: #FFFFFF;
	}
	.sortInputs{
		height: 66upx;
		line-height: 66upx;
		width: 350upx;
	}
	.sortInputs input{
		font-size: 18upx;
		padding-left: 10upx;
		display: inline-block;		
		position: relative;
		top: 16upx; 
		width: 100upx;
		height: 34upx;
		background-color: #fff;
	}
	.productLis{
		background-color: #fff;
		padding: 0 15upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.productLis .product{
		box-sizing: border-box;
		text-align: center;
		margin-top: 30upx;
		width: 353upx;
		height: 620upx;
		border:1px solid #eee;
		padding:22upx 8upx;
		
	}
	.product image{
		width: 332upx;
		height: 332upx;
	}
	.productInfo{
		padding: 0 5upx;
		text-align: center;
		min-height: 94upx;
	}
	.product button{
		background-color: #ff4300;
		width: 204upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		border-radius: 32upx;
		margin-top: 12upx;
	}
	
	
	
	.fs30{
		/* font-size: 30upx */
		font-size: 45upx
	}
	.fs26{
		font-size:39upx
		/* font-size: 26upx */
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.fs16{
		font-size: 24upx
		/* font-size: 16upx */
	}
	.fs14{
		font-size: 21upx
		/* font-size: 14upx */
	}
	.fs15{
		font-size: 22.5upx
		/* font-size: 15upx */
	}
	.fs27{
		font-size: 40.5upx
		/* font-size: 27upx */
	}
	.fs18{
		font-size: 27upx
		/* font-size: 18upx */
	}
	.fs28{
		font-size: 42upx
		/* font-size: 28upx */
	}
	.fs10{
		font-size: 15upx
		/* font-size: 10upx */
	}
	.fs30{
		font-size: 45upx
		/* font-size: 28upx */
	}
	.fs24{
		font-size: 36upx
		/* font-size: 24upx */
	}
	.fs20{
		font-size:30upx
		/* font-size: 20upx */
	}
	.fs22{
		font-size:33upx
		/* font-size: 22upx */
	}
	.fs21{
		font-size: 31.5upx
		/* font-size: 21upx */
	}
	.title{
		padding:0 25upx 10upx;
		display: flex;
		justify-content: space-between;	
		transform: translateY(20upx);
	}
	.ticket{
		position: relative;
		width: 100%;
		height: 292upx;
		background-color: #f0f0f0;
		margin-top: 30upx;
	}
	
	.ticket .ticketBg{
		
		width: 710upx;
		height: 232upx;
		position: absolute;
		left: 20upx;
		top: 30upx;
		z-index:0;
	}
	.ticketP{
		z-index: 10;
		position: absolute;
		font-size: 70upx;
		left: 70upx;
		top: 40upx;
		font-weight: bold;
	}
	.ticketM{
		z-index: 10;
		position: absolute;
		font-size: 22upx;
		left: 334upx;
		top: 100upx;
	}
	.ticketD{
		z-index: 10;
		position: absolute;
		font-size: 24upx;
		left: 60upx;
		top: 182upx;
	}
	.ticketB{
		z-index: 10;
		width: 146upx;
		height: 62upx;
		line-height: 62upx;
		text-align: center;
		position: absolute;
		font-size: 22upx;
		left: 560upx;
		top: 83upx;
		background-color: #fff;
		color:#ff4300;
		border-radius: 31upx;
	}
	.ticketB2{
		color: #ffcccc;
		z-index: 10;	
		position: absolute;
		left: 560upx;
		top: 153upx;
		border-radius: 31upx;
	}
	.ticketH{
		z-index: 20;
		width: 100upx;
		height: 100upx;
		position: absolute;
		left: 580upx;
		top: 93upx;
	}
	.active1{
		background-color: #ff4300;
		color: #FFFFFF;
	}
	
	.sxMask{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 100000;
	}
	.innerMask{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMask2{
		width: 598upx;
		height: 1192upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 100000;
	}
	.innerMaskTop{
		padding:0 28upx;
		height: 83upx;
		line-height: 83upx;
		background-color: #fafafa;
		font-size: 21upx
	}
	.sx{
		width: 30upx;
		height: 30upx;
		position: relative;
		top: 8upx;
		left: 5upx;
	}
	.innerMaskBottom{
		width: 100%;
		position: absolute;
		height: 80upx;
		bottom: 0;
		left: 0;
		
	}
	.innerMaskBottom button{
		height: 80upx;
		line-height: 80upx;
		width: 50%;		
		border: none;
		outline: none;
		border-radius: 0;
	}
	.innerMaskBottom1{
	
		background-color: #d2d2d2;
		color: #666666;
		font-size: 21upx
	}
	.innerMaskBottom2{
		background-color: #ff4300;
		color: #FFFFFF;		
		font-size: 21upx
	}
	.innerMask2{
		width: 610upx;
		height: 350upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		top: 0;
		margin: 500upx auto;
		padding-top: 60upx;
		z-index: 100000;
	}
	/* .innerMask2Bs{
		width: 380upx;
		margin:60upx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	} */
	.innerMask2Bs button{
		width: 160upx;	
		height: 60upx;
		border: none;
		outline: none;
	}
	.innerMask2B1{
		background-color: #ff4300;		
		color: #FFFFFF;
	}
	.innerMask2B2{
		background-color: #f0f0f0;
		color: #666666;
		border-color:#f0f0f0;
	}
	.innerMask2{
		width: 610upx;
		height: 350upx;
		background-color: #fff;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		top: 0;
		margin: 500upx auto;
		padding-top: 60upx;
		z-index: 100000;
	}
	.innerMask2Bs{
		width: 480upx;
		margin:60upx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.innerMask2Bs button{
		min-width: 200upx;
			
		height: 60upx;
		line-height: 60upx;
		border: none;
		outline: none;
	}
	.innerMask2B1{
		background-color: #ff4300;		
		color: #FFFFFF;
	}
	.innerMask2B2{
		background-color: #f0f0f0;
		color: #666666;
		border-color:#f0f0f0;
	}
	.ticketN{
		z-index: 10;
		position: absolute;
		font-size: 24upx;
		left: 70upx;
		top: 140upx;
		color: #ff4300;
		padding: 0 10rpx;
		line-height: 30rpx;
		width: 350rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ticketC{
		z-index: 10;
		position: absolute;
		font-size: 24upx;
		left: 334upx;
		top: 75upx;
		border: 1rpx solid #ff4300;
		color: #ff4300;
		padding: 0 10rpx;
		line-height: 30rpx;
		border-radius: 20rpx;
	}
	.ticketX{
		z-index: 10;
		position: absolute;
		font-size: 24upx;
		color: #666666;
		left: 340upx;
		top: 182upx;
	}
	.ticketX image{
		width: 35rpx;
		height: 35rpx;
		margin-bottom: -6rpx;
		margin-left: 5rpx;
	}
</style>
